<template>
  <customContainer ref="mainConfig" :config="config" />
</template>
<script lang='ts' setup>
import { ref, computed, getCurrentInstance } from 'vue'
import { Download } from '@element-plus/icons-vue'
import { DictDirection } from '@/store/modules/dicts'

const mainConfig = ref(null),
  {
    appContext: {
      config: {
        globalProperties: { $download },
      },
    },
  } = getCurrentInstance()
const queryParams = ref({
  pageSize: 10,
  pageNum: 1,
  waybillNo: '',
  dateRange: '',
})         
const handexport = () => {
  $download('order/product/toProductProfitsExp', `productReportForm_${ new Date().getTime() }.zip`)
}
const handleTableSelect = (rows: { [key: string]: any }[]) => {
  console.log(rows)
}
const config = computed({
  get() {
    return {
      query: {
        fields: [
          {
            label: '销售产品',
            type: 'select',
            prop: 'waybillNo',
            option: {
              dictInfo: { dict: DictDirection.产品 },
            },
          },
          {
            label: '起止时间',
            type: 'datePicker',
            prop: 'dateRange',
            option: {
              type: 'daterange',
              valueFormat: 'YYYY-MM-DD',
            },
          },
        
        ],
        queryParams: queryParams.value,
      
      },
      btns: [
        {
          title: '导出',
          type: 'primary',
          icon: Download,
          onClick: handexport,
        },
       
      ],
      table: {
        columns: [
          { type: 'selection', width: '55' },
       
          { label: '产品名称', align: 'center', prop: 'salesProductName' },
          { label: '总票数', align: 'center', prop: 'votesNumber' },
          { label: '总件数', align: 'center', prop: 'receivingTotal' },
          { label: '收货重量', align: 'center', prop: 'totalWeight' },
          { label: '应收金额', align: 'center', prop: 'amount' },
          { label: '实收金额', align: 'center', prop: 'paidAmount' },
          { label: '利润', align: 'center', prop: 'profits' },
         
        ],
        event: {
          onSelectionChange: (rows) => {
            handleTableSelect(rows)
          },
        },
      },
      api: '',
      customKey: 'dataReport/airSeaForm',
    }
  },
  set(v) {
    return v
  },
})
</script>
